<template>
  <div class="cloudvideo-setting">
    <!--<div style="margin-bottom: 25px;height:60px;width:100%;">-->
      <!--<sticky :sticky-top="80" class-name="cloudvideo-setting-submit">-->
        <!--<el-button type="primary" @click="createData()">保存</el-button>-->
      <!--</sticky>-->
    <!--</div>-->
    <div class="cloudvideo-setting-opened">
      <div class="cloudvideo-setting-opened-switch">
        <div class="cloudvideo-setting-opened-switch-header">云视频开关</div>
        <el-form
          :model="CloudVideoSet"
          :rules="rules"
          label-width="207px"
          class="cloudvideo-setting-opened-settingForm"
        >
          <el-form-item label="启用云视频:" prop="switch">
            <span style="color:#409EFF;margin-right:10px;">已启用</span>
            <el-button type="danger" size="mini" @click="handleClickClose">关闭</el-button>
            <!--<p style="color:#737373;margin:0;">-->
              <!--云视频为您提供安全、高性价比、以及优质的视听体验的视频服务，让您轻松创建在线视频课程。点击-->
              <!--<a-->
                <!--href="#"-->
                <!--style="color:#428bca"-->
              <!--&gt;这里</a>-->
              <!--了解详情-->
            <!--</p>-->
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import Sticky from '@/components/Sticky';
  import {getTenantId} from '@/utils/auth';
  import {addData, getData} from '@/api/cloud/cloud_video_set';

  export default {
    components: {
      Sticky
    },
    data() {
      return {
        CloudVideoSet: {
          status: '1',
          securityMode: '0',
          cloudVideoHeader: '1',
          transcodeQuality: 'fluency',
          transcodeSoundQuality: 'high',
          doubleSpeedPlayStatus: '1',
          fingerprintStatus: '1',
          displayTime: '0.5',
          theftPreventionStatus: '0',
          videoWatermarking: '0',
          playAutoStatus: '1',
          cloudVideoUrl: '',
          playerPictureUrl: '',
          videoPictureUrl: ''
        },
        rules: {}
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        getData(getTenantId()).then(response => {
          if (response.data) {
            // this.CloudVideoSet = response.data;
          }
        }).catch(err => {
          console.log(err)
        })
      },
      createData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.CloudVideoSet.tenantId = getTenantId();
            this.CloudVideoSet.status = '1';
            addData(this.CloudVideoSet).then(() => {
              this.$notify({
                title: '成功',
                message: '操作成功',
                type: 'success',
                duration: 2000
              });
              this.fetchData();
            })
          }
        })
      },
      handleClickClose() {
        this.CloudVideoSet.tenantId = getTenantId();
        this.CloudVideoSet.status = '0';
        addData(this.CloudVideoSet).then(() => {
          this.$notify({
            title: '成功',
            message: '操作成功',
            type: 'success',
            duration: 2000
          });
        });
        this.$emit('close')
      },
      safetyDeleteVideo() {
        this.$message({
          type: 'success',
          message: '恭喜，您的云视频全部为加密格式！安全性更高。',
          showClose: true
        })
      }
    }
  }
</script>

<style lang="scss">
  .cloudvideo-setting {
    &-opened {
      &-settingForm {
        p {
          color: #737373;
          margin: 0;
          margin-left: 40px;
        }

        .el-form-item__label {
          margin-right: 40px;
          font-size: 16px;
        }

        .videoupload {
          margin-left: 40px;
        }
      }

      &-switch {
        overflow: hidden;

        &-header {
          font-size: 16px;
          padding: 10px 20px;
          border-bottom: 1px solid #ddd;
          background-color: #fafafa;
          margin-bottom: 10px;
        }
      }

      &-basic {
        overflow: hidden;

        &-header {
          font-size: 16px;
          padding: 10px 20px;
          border-bottom: 1px solid #ddd;
          background-color: #fafafa;
          margin-bottom: 10px;
        }

        &-settingForm {
          .el-form-item__label {
            margin-right: 60px;
            font-size: 16px;
          }
        }
      }

      &-safe {
        overflow: hidden;

        &-header {
          font-size: 16px;
          padding: 10px 20px;
          border-bottom: 1px solid #ddd;
          background-color: #fafafa;
          margin-bottom: 10px;
        }

        .el-upload__tip {
          margin-left: 40px;
        }
      }
    }

    &-submit {
      width: 100%;
      line-height: 60px;
      height: 60px !important;
      text-align: right;
      padding-right: 30px;
      background-color: #ebf4ff;
    }
  }
</style>
